<template>
  <div>
    <div class="DescriptionTitle">{{ $t('projectPlanBaseInquireTitle') }}</div>
    <el-descriptions direction="horizontal" :column="24" border>
      <el-descriptions-item :label="$t('serialNumber')" :span="8" content-class-name="label-with-150">{{ `${projectPlanBaseInformation.serial_number}` }}</el-descriptions-item>
      <el-descriptions-item :label="$t('projectPlanStatus')" :span="8" content-class-name="label-with-150">{{ projectPlanBaseInformation.project_status_desc }}</el-descriptions-item>
      <el-descriptions-item :label="$t('department')" :span="8" content-class-name="label-with-150">{{ projectPlanBaseInformation.department_name }}</el-descriptions-item>
      <el-descriptions-item :label="$t('projectPlanName')" :span="24" content-class-name="label-with-150">{{ projectPlanBaseInformation.project_name }}</el-descriptions-item>
      <el-descriptions-item :label="$t('startDate')" :span="8" content-class-name="label-with-150">{{ projectPlanBaseInformation.start_date }}</el-descriptions-item>
      <el-descriptions-item :label="$t('endDate')" :span="8" content-class-name="label-with-150">{{ projectPlanBaseInformation.end_date }}</el-descriptions-item>
      <el-descriptions-item :label="$t('standardCurrency')" :span="8" content-class-name="label-with-150">{{ projectPlanBaseInformation.standard_curr }}</el-descriptions-item>
    </el-descriptions>
  </div>
</template>
<script>
export default {
  name: 'ProjectPlanBaseInformation',
  props: {
    projectPlanBaseInformation: {
      required: true,
      type: Object
    }
  }
}
</script>

  <style scoped>
  .DescriptionTitle {
    margin: 10px 0;
    font-size: 16px;
  }

  .clearfix::after {
    content: "";
    clear: both;
    display: table;
  }

  div .DescriptionDiv {
    float: left;
    box-sizing: border-box;
    border-left: 10px solid transparent;
  }

  div .DescriptionWidth25 {
    width: 25%
  }

  div .DescriptionWidth50 {
    width: 50%
  }

  div .DescriptionWidth75 {
    width: 75%
  }

  div .DescriptionWidth100 {
    width: 100%
  }

  div .DescriptionDivMarginLeftRemove {
    margin-left: -10px;
  }

  .label-with-150 {
    width: 150px;
  }

  </style>
